import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/widgets/button/ace_back_button.dart';
import 'package:flutter/material.dart';
import 'package:finance_app/generated/a.dart';
import 'package:flutter_svg/svg.dart';

class LoginTopScreenWidget extends StatelessWidget {
  final String imagePath;
  final String imageName;
  final double imageBottom;
  final double imageLeft;
  final bool hasBack;

  const LoginTopScreenWidget({
    Key key,
    this.imagePath,
    this.hasBack = true,
    this.imageName,
    this.imageBottom = 0,
    this.imageLeft = 0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyCurve(),
      child: Stack(
        children: [
          Container(
            height: 265,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    aceBlueColor,
                    Color.fromRGBO(107, 148, 230, 1),
                    aceBlueColor
                  ]),
            ),
          ),
          Positioned(
            bottom: imageBottom,
            left: imageLeft,
            child: SvgPicture.asset(
              imagePath,
              colorBlendMode: BlendMode.clear,
            ),
          ),
          Positioned(
              top: 0.0,
              bottom: 0.0,
              right: getDp(0),
              child: Center(
                child: Container(
                  width: MediaQuery.of(context).size.width / 2.8,
                  child: Text(
                    imageName,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: getSp(28),
                      fontWeight: FontWeight.w700,
                      height: 36 / 28,
                    ),
                  ),
                ),
              )),
          if (hasBack && ModalRoute.of(context).canPop)
            Positioned(
                left: 0.0,
                top: MediaQuery.of(context).padding.top,
                child: AceBackButton()),
        ],
      ),
    );
  }
}

class MyCurve extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 18);

    var firstControlPoint = Offset(size.width / 5, size.height - 55);
    var firstEndPoint = Offset(size.width / 2.4, size.height - 16);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);

    var secondControlPoint = Offset(size.width / 1.5, size.height + 26);
    var secondEndPoint = Offset(size.width, size.height - 40);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);

    path.lineTo(size.width, size.height - 40);
    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
